Creating and Removing Elements Dynamically

In this section, you’ll learn how to create new HTML elements, add them to the DOM, and remove them. This is useful for dynamically updating the content of a page based on user interactions.

Adding New Elements with createElement

The createElement method allows you to create an HTML element in JavaScript. You can then add it to the DOM using methods like appendChild or append.

1. Creating and Appending a New Element

   <div id="container"></div>
   <button id="add-item">Add Item</button>

   const container = document.getElementById("container");
   const addItemButton = document.getElementById("add-item");
   
   // Add a new item when the button is clicked
   addItemButton.addEventListener("click", () => {
     // Create a new <p> element
     const newItem = document.createElement("p");
     newItem.textContent = "This is a new item";
     
     // Append the new item to the container
     container.appendChild(newItem);
   });

   Explanation: When the "Add Item" button is clicked, a new <p> element with the text "This is a new item" is created and added to the container div.

2. Inserting Elements at Specific Positions

   If you want to insert an element in a specific position, you can use insertBefore.

   <ul id="list">
     <li>Item 1</li>
     <li>Item 2</li>
   </ul>
   <button id="insert-item">Insert Item at Top</button>

   const list = document.getElementById("list");
   const insertItemButton = document.getElementById("insert-item");
   
   insertItemButton.addEventListener("click", () => {
     const newItem = document.createElement("li");
     newItem.textContent = "New Top Item";
   
     // Insert the new item as the first child of the list
     list.insertBefore(newItem, list.firstChild);
   });

   Explanation: The new <li> element is added at the top of the list by inserting it before the first child of the list element.

Removing Elements from the DOM

1. Using removeChild
   The removeChild method removes a specific child element from its parent.

   <div id="box">
     <p>Item to Remove</p>
   </div>
   <button id="remove-item">Remove Item</button>

   const box = document.getElementById("box");
   const removeItemButton = document.getElementById("remove-item");
   
   removeItemButton.addEventListener("click", () => {
     const itemToRemove = box.querySelector("p");
     if (itemToRemove) {
       box.removeChild(itemToRemove);
     }
   });

   Explanation: The removeChild method removes the <p> element from the box div when the button is clicked.

2. Using remove (Modern Method)
   The remove method is a simpler way to remove an element directly.

   <p id="text-to-remove">This text will be removed</p>
   <button id="remove-text">Remove Text</button>

   const textToRemove = document.getElementById("text-to-remove");
   const removeTextButton = document.getElementById("remove-text");
   
   removeTextButton.addEventListener("click", () => {
     textToRemove.remove();
   });

   Explanation: Here, textToRemove.remove() removes the selected <p> element directly.

Working with Classes and Attributes Programmatically

1. Adding and Removing Classes

   <div id="box" class="box-style">This is a box</div>
   <button id="toggle-style">Toggle Style</button>

   const boxElement = document.getElementById("box");
   const toggleStyleButton = document.getElementById("toggle-style");
   
   toggleStyleButton.addEventListener("click", () => {
     // Toggle a CSS class on and off
     boxElement.classList.toggle("highlighted");
   });

   Explanation: The toggle method on classList adds the highlighted class if it’s not present and removes it if it is. This makes toggling classes very convenient.

2. Updating Attributes

   <img id="profile-pic" src="default.jpg" alt="Profile Picture">
   <button id="change-pic">Change Picture</button>

   const profilePic = document.getElementById("profile-pic");
   const changePicButton = document.getElementById("change-pic");
   
   changePicButton.addEventListener("click", () => {
     // Change the 'src' attribute
     profilePic.setAttribute("src", "new-profile.jpg");
   });

   Explanation: The setAttribute method allows you to change the src of the image, replacing it with new-profile.jpg.